<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo jQuery Footer Caption</title>

<style type="text/css">
body {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:10px}
div#params {position:absolute;top:0;right:0;width:450px;border:1px solid #333;padding:8px;background:#eee}
div#params label {clear:right;display:block;float:left;width:80px;text-align:right;margin:0 10px 0 0;}
div#params input {clear:right;margin:0 0 6px;}
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3")</script>
<script type="text/javascript" src="http://undolibrary.googlecode.com/svn/trunk/jquery/jquery.simpleslider/jquery.simpleslider.js"></script>

<script type="text/javascript">

var c = '';

google.setOnLoadCallback( 
	function() {
		c = $('div#demo').html();
		$('button#button-demo').click( 
			function() {
				$('div#demo').html( c );
				eval( 'var ts = ' + $('textarea#titleStyle').val() );
				eval( 'var ss = ' + $('textarea#subtitleStyle').val() );
				$('ul#demo-slider').simpleSlider( {
													alpha	        : $('input#alpha').val(),	        
													bgColor	        : $('input#bgColor').val(),
													height	        : $('input#height').val(),        
													bgSpeed      	: $('input#bgSpeed').val(),      
													captionSpeed	: $('input#captionSpeed').val(),
													timeOut			: $('input#timeOut').val(),
													titleStyle		: ts,
													subtitleStyle	: ss
												  });
			}
		 );
	}
);

</script>
</head>
<body>

<div id="demo">
	<ul id="demo-slider">
		<li rel="simpleSlider{timeOut: 1000}" title="Elemento 1"><img title="Caption 1" src="http://www.undolog.com/wp-content/uploads/2008/02/image2.png" /></li>
		<li title="Elemento 2"><img title="Caption 2" src="http://www.undolog.com/wp-content/uploads/2008/02/image3.png" /></li>
		<li title="Elemento 3"><img title="Caption 3" src="http://www.undolog.com/wp-content/uploads/2008/02/image4.png" /></li>
		<li rel="simpleSlider{timeOut: 8000}" title="Elemento 4"><img title="Caption 4" src="http://www.undolog.com/wp-content/uploads/2008/02/image5.png" /></li>
	</ul>
</div>

<div id="params">
	<label>alpha:</label> <input type="text" size="5" value="0.7" id="alpha" /><br/>
	<label>bgColor:</label> <input type="text" size="5" value="#000" id="bgColor" /><br/>
	<label>height:</label> <input type="text" size="5" value="50px" id="height" /><br/>
	<label>bgSpeed:</label> <input type="text" size="5" value="slow" id="bgSpeed" /><br/>
	<label>captionSpeed:</label> <input type="text" size="5" value="slow" id="captionSpeed" /><br/>
	<label>timeOut:</label> <input type="text" size="5" value="4000" id="timeOut" /><br/>
	<label>titleStyle:</label> <textarea cols="40" rows="3" id="titleStyle">{ color: '#fff', fontSize: '14px', fontFamily: 'Arial', margin: '5px 10px 0 10px', textAlign: 'left' }</textarea>
	<label>subtitleStyle:</label> <textarea cols="40" rows="3" id="subtitleStyle">{ color: '#fff', fontSize: '10px', fontFamily: 'Verdana', margin: '0 10px 0 10px', textAlign: 'left' }</textarea>

	<p align="center"><button id="button-demo">Start Simple Slider</button></p>
</div>

</body>
</html>